<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ppctu="http://primefaces.org/ui" 
      xmlns:f="http://java.sun.com/jsf/core">
  <h:head>
    <title>Telecare Alarm Center</title>
    <link href="#{request.contextPath}/resources/img/favicon.ico" rel="shortcut icon" />    
    <h:outputStylesheet name="css/mainstyle.css"/>
  </h:head>
  <h:body>
    <div id="head">
        <div class="contenedor960">
            <span> Telecare Alarm Center </span>
        </div> <!-- fin contenedor960 -->
    </div> <!-- fin menu -->    
    
    <div class="contenedor960">                   
       <ppctu:growl id="growl" showDetail="true" />  
              
        <h:form>  

            <ppctu:fieldset id="container" legend="Telecare Alarm Center: Administration">  

                <h:panelGroup rendered="#{chatController.loggedIn}" >  
                    <ppctu:outputPanel layout="block" style="width:600px;height:200px;overflow:auto"   
                            styleClass="chatroom" />  

                    <ppctu:separator />  

                    <ppctu:inputText value="#{chatController.message}" styleClass="messageInput" />  
                    <ppctu:spacer width="5" />  
                    <ppctu:commandButton value="Send" actionListener="#{chatController.send}" global="false" oncomplete="$('.messageInput').val('').focus()"/>  
                    <ppctu:spacer width="5" />  
                    <ppctu:commandButton value="Disconnect" actionListener="#{chatController.disconnect}" global="false"   
                                        oncomplete="chatAgent.close()" update="container" />  
                </h:panelGroup>  

                <h:panelGroup rendered="#{!chatController.loggedIn}" >  
                    Username: <ppctu:inputText value="#{chatController.username}" />  
                    <ppctu:spacer width="5" />  
                    <ppctu:commandButton value="Login" actionListener="#{chatController.login}" update="container"   
                                    icon="ui-icon-person"/>  
                </h:panelGroup>  

            </ppctu:fieldset>  

        </h:form>  

        <ppctu:push onmessage="handleMessage" channel="chat" widgetVar="chatAgent" />  

        <script type="text/javascript">  
            function handleMessage(evt, data) {  
                var chatContent = $('.chatContent');  
                chatContent.append(data + '<br />');  

                //keep scroll  
                chatContent.scrollTop(chatContent.height());  
            }  
        </script>  
    </div> <!-- fin contenedor960 -->               
<ppctu:dock>  
    <ppctu:menuitem value="Home" icon="./resources/img/dock/home.png" url="./dock.xhtml"/>  
    <ppctu:menuitem value="Email" icon="./resources/img/dock/email.png" url="#"/>  
    <ppctu:menuitem value="Chat" icon="./resources/img/dock/portfolio.png" url="./chat.xhtml"/>  
    <ppctu:menuitem value="Chart" icon="./resources/img/dock/chart.png" url="./chart.xhtml"/> 
    <ppctu:menuitem value="History" icon="./resources/img/dock/history.png" url="#"/>  
</ppctu:dock> 
</h:body>


</html>

